const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入 提取js中的css代码的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//将css文件及代码进行极致压缩s
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');


module.exports = {
    entry: {
        //验证码三方库引用
        swiper:"./lib/swiper/swiper-bundle.js",
        captcha:'./lib/captcha/captcha-mini.js',
        weui:"./lib/weui/weui.js",
        //公共样式
        commonCSS:'./src/js/commonCSS.js',
        //工具公共js
        utils:'./src/utils/utils.js',
        //自己页面的js
        badge:"./src/js/badge.js",
        echarts:"./src/js/echarts.js",
        play:"./src/js/play.js",
        info:"./src/js/info.js",
        course:"./src/js/course.js",
        mine:"./src/js/mine.js",
        poster:"./src/js/poster.js",
        login:"./src/js/login.js",
        register:"./src/js/register.js", 
        flexible:'./src/js/flexible.js',
        index:'./src/js/index.js',
        sport:'./src/js/sport.js'
    },
    output: {
        path: path.resolve() + '\\dist',
        filename: 'js/[name].js',
        publicPath: './'
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use:[{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: '../'
                    }
                },'css-loader']
            },
            {
                test: /.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: '../'
                    }
                }, 'css-loader', 'less-loader']
            },
            {
                test: /.(png|jpg|gif|jpeg|webp)$/i,
                loader: 'url-loader',
                options: {
                    name: '[hash:16].[ext]',
                    limit: 10 * 1024,
                    esModule: false,
                    outputPath:'img'    //输出目录
                }
            },
            {
                test: /.html$/,
                loader: 'html-loader'
            },
            {
                test: /.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options:{
                    outputPath:'fonts'   //输出的目录
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/poster.html',
            filename: 'poster.html',        //以哪个html文件作为打包的模板
            chunks:['poster','flexible','commonCSS'],
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/login.html',
            filename: 'login.html',        //以哪个html文件作为打包的模板
            chunks:['login','flexible','commonCSS','utils'],
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/register.html',
            filename: 'register.html',        //以哪个html文件作为打包的模板
            chunks:['register','flexible','commonCSS','captcha','utils'], //captcha验证码
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/index.html',
            filename: 'index.html',        //以哪个html文件作为打包的模板
            chunks:['index','flexible','commonCSS','utils','swiper'],
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/mine.html',
            filename: 'mine.html',        //以哪个html文件作为打包的模板
            chunks:['mine','flexible','commonCSS','utils'],
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/sport.html',
            filename: 'sport.html',        //以哪个html文件作为打包的模板
            chunks:['sport','flexible','commonCSS','utils'],
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/course.html',
            filename: 'course.html',        //以哪个html文件作为打包的模板
            chunks:['course','flexible','commonCSS','utils'],
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/info.html',
            filename: 'info.html',        //以哪个html文件作为打包的模板
            chunks:['info','flexible','commonCSS','weui'],
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/play.html',
            filename: 'play.html',        //以哪个html文件作为打包的模板
            chunks:['play','flexible','commonCSS','utils'],
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/echarts.html',
            filename: 'echarts.html',        //以哪个html文件作为打包的模板
            chunks:['echarts','flexible','commonCSS'],
        }),
        new HtmlWebpackPlugin({   //配置html打包的插件
            template: './src/badge.html',
            filename: 'badge.html',        //以哪个html文件作为打包的模板
            chunks:['badge','flexible','commonCSS'],
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css' // 输出到css文件夹里
        }),
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode: 'development',

    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 8080,  // 端口  8080 80  8081 8082
        open: true, // 自动打开服务
        publicPath: '/', // 静态资源查找路径
        openPage: 'poster.html', // 打开的页面
      },
    target: 'web', // 目标是浏览器

}